/**
 * Created by Administrator on 2017/2/7.
 */
import { Component } from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'my-linkone',
    template: `
<div class="pubu">

             <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/2.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
              <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/3.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
             <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/2.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
              <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/3.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
             <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/2.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
              <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/2.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
         <div  class="_masonry-box">
                 <a routerLink="/linkRes">
                    <img class="_box-img" src="assets/img/resource/3.jpg"/>
                 </a>
                <div class="_box-intro">
                      <p class="_box-name">琉璃料管废料</p>
                   <div class="_box-place">
                         <div class="_box-place-l">淄博</div>
                          <div class="_box-place-r">
                              <span class="glyphicon glyphicon-heart"></span>235
                          </div>
                   </div>
                   <p class="_box-class"><琉璃></p>
              </div>
            </div>
             <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/3.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
              <div  class="_masonry-box">
           <a routerLink="/linkRes">
              <img class="_box-img" src="assets/img/resource/2.jpg"/>
           </a>
           <div class="_box-intro">
              <p class="_box-name">琉璃料管废料</p>
              <div class="_box-place">
                 <div class="_box-place-l">淄博</div>
                 <div class="_box-place-r"><span class="glyphicon glyphicon-heart"></span>235</div>
              </div>
              <p class="_box-class"><琉璃></p>
           </div>
        </div>
        
             <div  class="_masonry-box">
                 <a routerLink="/linkRes">
                    <img class="_box-img" src="assets/img/resource/3.jpg"/>
                 </a>
                <div class="_box-intro">
                      <p class="_box-name">琉璃料管废料</p>
                   <div class="_box-place">
                         <div class="_box-place-l">淄博</div>
                          <div class="_box-place-r">
                              <span class="glyphicon glyphicon-heart"></span>235
                          </div>
                   </div>
                   <p class="_box-class"><琉璃></p>
              </div>
            </div>
             <div  class="_masonry-box">
                 <a routerLink="/linkRes">
                    <img class="_box-img" src="assets/img/resource/3.jpg"/>
                 </a>
                <div class="_box-intro">
                      <p class="_box-name">琉璃料管废料</p>
                   <div class="_box-place">
                         <div class="_box-place-l">淄博</div>
                          <div class="_box-place-r">
                              <span class="glyphicon glyphicon-heart"></span>235
                          </div>
                   </div>
                   <p class="_box-class"><琉璃></p>
              </div>
            </div>
        </div>
           
`,
    styles: [`
     @media (max-width: 992px) { 
     .pubu{
            height: auto;
        	-moz-column-count:3; /* Firefox */
	         -webkit-column-count:3; /* Safari and Chrome */
	         column-count:3;
	         -webkit-column-gap:10px;
                -moz-column-gap:10px;
                -o-column-gap:10px;
        }
        .pubu ._masonry-box{
        display: inline-block;
        min-height:270px; 
        }
      }
    @media (min-width: 992px) and (max-width:1200px) { 
    .pubu{
    height: auto;
        	-moz-column-count:4; /* Firefox */
	         -webkit-column-count:4; /* Safari and Chrome */
	         column-count:4;
	         -webkit-column-gap:10px;
                -moz-column-gap:10px;
                -o-column-gap:10px;
        }
        .pubu ._masonry-box{
        display: inline-block;
        min-height:270px;
        }
     }
    @media (min-width: 1200px) { 
         .pubu{
            height: auto;
        	-moz-column-count:6; /* Firefox */
	         -webkit-column-count:6; /* Safari and Chrome */
	         column-count:6;
	         -webkit-column-gap:10px;
                -moz-column-gap:10px;
                -o-column-gap:10px;
        }
        .pubu ._masonry-box{
        display: inline-block;
        min-height:270px;
        }
     }
        
`]
})
export class linkO {

}
